import React from 'react';
import PropTypes from "react";

class ReduxForm extends React.Component {
    static propTypes = {
        timers:PropTypes.array,
        timer:PropTypes.object,
        isLoading:PropTypes.bool,
        saveStatus: PropTypes.string,
        onSubmit: PropTypes.function
    }
    constructor() {
        super();
    }
    state = {
        timers:[],
        // timer:this.props.timer || {
        timer: {
            title: '',
            project: '',
            id: '',
            elapsed: null,
            runningSince: null,
        }
    }

    handleFormChange=(evt)=>{
        const timer = Object.assign({},this.state.timer)
        timer[evt.target.name]=evt.target.value;
        this.setState({timer})
        console.log(timer,this.state.timer)
    }

    handleFormSubmit=(evt)=>{
        evt.preventDefault();
        this.props.onSubmit(this.state.timer)
    }

    render() {
        return(
            <div>
                <form onSubmit={this.handleFormSubmit}>
                    <div>
                        <label>名称</label>
                        <input name="title" type='text' value={this.state.timer.title} onChange={this.handleFormChange}/>
                    </div>
                    <div>
                        <label>项目</label>
                        <input  name="project" type='text' value={this.state.timer.project} onChange={this.handleFormChange}/>
                    </div>
                    <input type="submit"/>
                </form>
            </div>
        )
    }
}

export default ReduxForm;